<template>
  <div id="page">
    <ul>
      <li>
        <img :src="list.pic" alt="" />
        <p>{{ list.name }}</p>
        <p>{{ list.characteristic }}</p>
        <p style="color: red">￥{{ list.minPrice }}</p>
      </li>
      <li>
        <img :src="lists.pic" alt="" />
        <p>{{ lists.name }}</p>
        <p>{{ lists.characteristic }}</p>
        <p style="color: red">￥{{ lists.minPrice }}</p>
      </li>
      <li>
        <img :src="listss.pic" alt="" />
        <p>{{ listss.name }}</p>
        <p>{{ listss.characteristic }}</p>
        <p style="color: red">￥{{ listss.minPrice }}</p>
      </li>
      <li>
        <img :src="listsss.pic" alt="" />
        <p>{{ listsss.name }}</p>
        <p>{{ listsss.characteristic }}</p>
        <p style="color: red">￥{{ listsss.minPrice }}</p>
      </li>
    </ul>
  </div>
</template>

<script>
import { Pice } from "../../utils/api";
export default {
  name: "",
  data() {
    return {
      list: [],
      lists: {},
      listss: {},
      listsss: {},
    };
  },
  created() {
    Pice().then((res) => {
      console.log(res.data[9]);
      this.list = res.data[9];
      this.lists = res.data[8];
      this.listss = res.data[7];
      this.listsss = res.data[6];
    });
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
* {
  font-size: 0.2rem;
}
#page {
  width: 100%;
  ul {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    li {
      width: 45%;
      margin-left: 5%;
      margin-top: 3%;
      font-size: 0.5rem;
      img {
        width: 100%;
      }
      p {
        margin-top: 5%;
      }
    }
  }
}
</style>
